<template>
  <div class="boxss">
    <div class="boxone">
      <h4>属性规格</h4>
      <div>
        <span class="ming">规格名称</span> <input v-model="form.name" type="text" placeholder="请输入规格名称">
      </div>

      <span class="gui">规格</span><input v-model="form.address" type="text" placeholder="请输入规格">
      <span class="shu">属性</span><input v-model="form.attribute" type="text" placeholder="请输入属性">
      <el-button type="primary" class="ding" @click="handleClickclose">确定</el-button>

      <el-button @click="handleClickqx">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      form: {
        name: '',
        address: '',
        attribute: ''
      }
    }
  },
  methods: {
    handleClickclose() {
      this.$emit('handleClicktrue', this.form)
    },
    handleClickqx() {
      this.$emit('closetk')
    }
  }
}
</script>

<style>
.boxss {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.boxone {
  width: 800px;
  height: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}
.ming{
  margin-left: 20px;
  margin-right: 10px;
}
.gui{

  margin-left: 54px;
  margin-right: 12px;
}
.shu{
  margin-left: 20px;
  margin-right: 12px;
}
.ding{
  margin-left: 10px;
}
</style>

